<template>
  <div class='root'>
    <keep-alive>
      <router-view v-if='$route.meta.keepAlive' />
    </keep-alive>
    <router-view v-if='!$route.meta.keepAlive' />
    <van-tabbar v-model='active' class='footer-bottom'>
      <van-tabbar-item icon='home-o' to='/product'>
        {{ $t('m.footer.product') }}
      </van-tabbar-item>
      <van-tabbar-item icon='cluster-o' to='/category'>
        {{ $t('m.footer.category') }}
      </van-tabbar-item>
      <van-tabbar-item icon='shopping-cart-o' to='/cart'>
        {{ $t('m.footer.carts') }}
      </van-tabbar-item>
      <van-tabbar-item icon='friends-o' to='/member'>
        {{ $t('m.footer.me') }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { Tabbar, TabbarItem } from 'vant'
export default {
  data () {
    return {
      active: 0,
    }
  },
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  methods: {},
  created () {
    switch (this.$route.path) {
      case '/product':
        this.active = 0
        break
      case '/category':
        this.active = 1
        break
      case '/cart':
        this.active = 2
        break
      case '/member':
        this.active = 3
        break
    }
  },
}
</script>

<style lang='scss' scoped>
:global(.van-tabbar-item) {
  cursor: pointer;

  &.van-tabbar-item--active {
    color: #fa0e25;
  }
}
</style>
